import React from "react"
import "./style.less"
// import hothouse1 from "../../../static/images/home_img/hothouse1.jpg"
import LoadMore from "../LoadMore"
import { getHomeIndexData } from "../../../fetch/home"

export default class HotHouse extends React.Component{

    constructor () {
        super();
        this.state = {
            data: [],
            hasMore: false,
            page: 1,
            isLoading: true  //判读数据是否处于请求状态，默认处于请求状态
        }
    }

    componentDidMount () {
        let cityName = this.props.cityName;
        this.httpRes(cityName,1);
    }

    httpRes(cityName,page){
        getHomeIndexData(cityName,page)
        .then(data => {
            console.log(data);
            this.setState({
                data: this.state.data.concat(data.data),
                hasMore: data.hasMore,
                isLoading: false,
                page: this.state.page+1
            })
        })
    }
    loadMoreFunc () {
        this.setState({
            isLoading: true
        })
        let cityName = this.props.cityName;
        this.httpRes(cityName,this.state.page);
    }


        render (){
            let { data, hasMore, isLoading } = this.state;
            return (
                data.length>0 ?
                <div className="home-hothouse">
                    <h3>热门房源</h3>
                   {
                    data.map((ele,index)=> {
                        return (
                            <div className="rentInfo-container" key={ index }>
                                <img src={ ele.img } alt="图片加载失败" />
                                <div className="hothosue-rentInfo">
                                    <div>
                                        <p>{ ele.title }</p>
                                        <p>{ ele.houseType }</p>
                                    </div>
                                    <div>
                                        <p>{ ele.rentType }</p>
                                        <p>{ ele.price }/月</p>
                                    </div>
                                </div>
                            </div>
                        )
                    }) 
                   }
                   {
                    hasMore
                    ?<LoadMore loadMoreFunc={this.loadMoreFunc.bind(this)} isLoading={ isLoading }/>
                    :<div>我是有底线的...</div>
                   }   
                </div>
                : 
                <div className="isLoading">正在加载数据...</div>

            )
        }
}

